<template>
    <view>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain :icon="Plus" @click="handleAdd" v-isAdmin>新增</el-button>
            </el-col>
        </el-row>
        <CountCard title="薪酬总计" :value="needPay" prefix="￥" suffix="" style="width: 250px;">

        </CountCard>
        <el-table :data="tableData">>

            <el-table-column label="变动" align="center" prop="logType">
                <template #default="scope">
                    <el-tag class="ml-2" type="success" v-if="scope.row.logType == '增加'"> 增加</el-tag>
                    <el-tag class="ml-2" type="danger" v-if="scope.row.logType == '减少'"> 减少</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="变动" align="center" prop="changeNum" />
            <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark" />
        </el-table>
        <el-dialog title="薪酬变更" v-model="open" width="500px" append-to-body>
            <el-form ref="formRef" :model="form" label-width="80px">
                <el-form-item label="变动" prop="changeNum">
                    <el-input-number v-model="form.changeNum" placeholder="请输入进度" style="width: 300px" />
                </el-form-item>
                <el-form-item label="变动原因" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入变动原因" style="width: 300px" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </view>
</template>
<script setup>
import { UploadFilled, Avatar, Delete, VideoPlay, Edit, Plus, Search, Refresh, Unlock, Lock, Files } from '@element-plus/icons-vue'
import { createOne, queryList } from '@/custom/pms/api/salary';
import useApp from '@/hooks';
const { $, proxy } = useApp();
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const tableData = ref([]);
const open = ref(false);
const needPay = ref(0);
const form = ref({
    orderId: undefined,
    userId: undefined,
    changeNum: 0,
    remark: undefined
})
const props = defineProps({
    order: {
        type: [Object]
    }
});
// 新增
function handleAdd() {
    open.value = true;
}
// 表单提交
function submitForm() {
    form.value.orderId = props.order.id;
    form.value.userId = userStore.userId;
    createOne(form.value).then(res => {
        $.showToast({
            title: '更新成功',
            icon: 'success'
        })
        open.value = false;
        doQuery();
    })
}
watch(() => props.order, () => {
    doQuery();
})
function doQuery() {
    if (!$.isEmpty(props.order)) {
        const queryParams = {
            orderId: props.order.id,
            pageSize: 100,
            pageNum: 1
        }
        queryList(queryParams).then(res => {
            console.log(res)
            tableData.value = res.content;
            let sum = 0.0;
            tableData.value.forEach(element => {
                sum += element.changeNum;

            });
            needPay.value = sum;
        })
    }

}
doQuery();
</script>